<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d盒子</title>
    <style>
        /*
        二、变换基点
            1.transform-origin
            a)默认基点为中心点，可以通过设置坐标值或关键词改变基点

            b)例：transform-origin:left top; 讲变换基点改为左上角

            2. perspective-origin 景深基点 在什么方位去看

        三、3D变换
            1.变换风格transform-style 和 景深perspective (近大远小)
            a)浏览器默认2D变换场景，是无法体现出3D变换样式的，所以在3D变换时要加上这两个属性

            translate3d();位移 Z轴是垂直电脑屏幕的,x轴水平冲右，y竖直向上。
            rotate3D();旋转 沿着指定的轴进行旋转。
        */
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            padding: 100px;
            margin: 100px auto;
            box-shadow: 0 0 5px #000;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
            perspective: 800px;   /*景深*/
            -webkit-perspective-origin: top left; /*看的位置*/

        }

        .wrap {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;//3d风格
            -webkit-transition: 3s;
            -moz-transition:  3s;
            -ms-transition:  3s;
            -o-transition:  3s;
            transition:  3s;
            transform-origin: center center -100px;//基点位置

        }
        .wrap div{
            width: 100%;
            height: 100%;
            position: absolute;
            opacity:0.4;
            border: 1px solid #ccc;
        }
        .wrap div:nth-child(1){
            background:-webkit-linear-gradient(
                    left top,
                    #aaa 5%,
                    #bbb 5%,
                    #ccc 80%,
                    #bbb 5%,
                    #aaa 5%
            );
            /*box-shadow: 5px 3px 3px #aaa inset;*/
        }
        .wrap div:nth-child(2){
            background: lightblue;
            transform: translateZ(-200px);
        }
        .wrap div:nth-child(3){
            background: lightcoral;
            transform: rotateY(90deg);
            transform-origin: left;
        }
        .wrap div:nth-child(4){
            background: lightgoldenrodyellow;
            transform: rotateY(-90deg);
            transform-origin: right;
        }
        .wrap div:nth-child(5){
            background: lightseagreen;
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        .wrap div:nth-child(6){
            background: lightpink ;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        #box:hover .wrap{
            transform: rotateX(180deg);
        }

    </style>
</head>
<body>
<div id="box">
    <div class="wrap">
        <div>前</div>
        <div>后</div>
        <div>左</div>
        <div>右</div>
        <div>上</div>
        <div>下</div>
    </div>
</div>
</body>
</html>